<template>
  <div>
    <h1>我的留言</h1>
    <div class="centerBox">
      <el-table
          :data="messages"
          @row-click="getDetails"
          height="250"
          border
          style="width: 100%">
        <el-table-column
            prop="author"
            label="名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="message"
            label="留言">
        </el-table-column>
        <el-table-column
            prop="mtime"
            label="时间"
            width="160">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="id"-->
<!--            label="序号"-->
<!--            width="160">-->
<!--        </el-table-column>-->
        <el-table-column width="100">
          <template v-slot="scope">
            <el-button
                @click.native.prevent="deleteMessage(scope.$index)"
                type="text"
                size="small"
                >
              移除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

  </div>

</template>

<script>

export default {
  name: "myMessage",
  data() {
    return {
      messages: [],
    }
  },
  methods: {
    getDetails(row) {
      this.id = row.id;
      console.log(row.id)
      console.log(row)
      this.$store.commit('getId',this.id)
    },
    async deleteMessage(id) {
      // this.getDetails();
      // console.log(this.$store.state.id)
      // this.getId();
      console.log(id)
      await axios.get("http://localhost:8181//deletemessage?id=" + this.messages[id].id).then((t) => {
        console.log(t)
      })
      this.getMessage();

    },
    getMessage(){
      axios.get("http://localhost:8181//selectmymessage?uid=" + this.$store.state.uid).then((t) => {
        console.log(t)
        this.messages = t.data;
      })
    }
  },
  mounted() {
    axios.get("http://localhost:8181//selectmymessage?uid=" + this.$store.state.uid).then((t) => {
      console.log(t)
      this.messages = t.data;
    })
  },

}
</script>

<style scoped>
  .centerBox {
    position: absolute;
    top: 20%;
    left: 15%;
    right: 15%;
  }
</style>